<!DOCTYPE html>
<html>
<head>
    <title>snapping</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
	<script type="text/javascript" src="../js/lib/JQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../js/lib/OpenLayers-2.11/lib/OpenLayers.js"></script>
    <!-- 
    	<script src="../js/lib/OpenLayers-2.11/OpenLayers.js"></script>
    	<script type="text/javascript" src="../js/lib/OpenLayers-2.11/lib/OpenLayers.js"></script>
     -->
	<script type="text/javascript" src="../js/lib/OpenLayers-2.11/lib/OpenLayers/Layer/GoogleTile.js"></script>
	
    <script type="text/javascript">
        var proj = 'EPSG:26915';
        var lodLength = 20;
        var resolutions = [];
        var resolution = 156543.033928;
        for (var i = 0; i < lodLength; i++) {
            resolutions.push(resolution);
            resolution /= 2;
        }
        var tileSize = new OpenLayers.Size(256, 256);
        var agsTileOrigin = new OpenLayers.LonLat(-20037508.342787, 20037508.342787);
        var mapExtent = new OpenLayers.Bounds(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787);

        var map;
        function init() {
         format = 'image/png';
            map = new OpenLayers.Map('map', {
			    displayProjection: new OpenLayers.Projection("EPSG:4326"),
                controls: [
		            new OpenLayers.Control.Navigation(),
		            new OpenLayers.Control.LayerSwitcher(),
		            new OpenLayers.Control.PanZoomBar(),
		            new OpenLayers.Control.MousePosition()
				]
            });
            var baseLayer = new OpenLayers.Layer.GoogleTile('google 影像地图',
				'http://mt0.google.cn/vt/lyrs=s@118&hl=zh-CN&gl=CN&src=app&x=${x}&y=${y}&z=${z}&s=Galile',
				{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                isBaseLayer: true,
                type: 'png'
                //projection: proj
            });
            
			
			var Layer = new OpenLayers.Layer.GoogleTile('google 矢量地图',
				'http://mt1.google.cn/vt/lyrs=m@189000000&hl=zh-CN&gl=CN&src=app&x=${x}&s=&y=${y}&z=${z}&s=Ga',
				{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                isBaseLayer: true,
                type: 'png'
                //projection: proj
            });
			
			
           //map.addLayers([Layer,baseLayer]);
           
			
			
			//定义样式
			var styles = new OpenLayers.StyleMap({
                "default": new OpenLayers.Style(null, {
                    rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                "Point": {
                                    pointRadius: 5,
                                    graphicName: "square",
                                    fillColor: "white",
                                    fillOpacity: 0.25,
                                    strokeWidth: 1,
                                    strokeOpacity: 1,
                                    strokeColor: "#3333aa"
                                },
                                "Line": {
                                    strokeWidth: 3,
                                    strokeOpacity: 1,
                                    strokeColor: "#6666aa"
                                },
                                "Polygon": {
                                    strokeWidth: 1,
                                    strokeOpacity: 1,
                                    fillColor: "#9999aa",
                                    strokeColor: "#6666aa"
                                }
                            }
                        })
                    ]
                }),
                "select": new OpenLayers.Style(null, {
                    rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                "Point": {
                                    pointRadius: 5,
                                    graphicName: "square",
                                    fillColor: "white",
                                    fillOpacity: 0.25,
                                    strokeWidth: 2,
                                    strokeOpacity: 1,
                                    strokeColor: "#0000ff"
                                },
                                "Line": {
                                    strokeWidth: 3,
                                    strokeOpacity: 1,
                                    strokeColor: "#0000ff"
                                },
                                "Polygon": {
                                    strokeWidth: 2,
                                    strokeOpacity: 1,
                                    fillColor: "#0000ff",
                                    strokeColor: "#0000ff"
                                }
                            }
                        })
                    ]
                }),
                "temporary": new OpenLayers.Style(null, {
                    rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                "Point": {
                                    graphicName: "square",
                                    pointRadius: 5,
                                    fillColor: "white",
                                    fillOpacity: 0.25,
                                    strokeWidth: 2,
                                    strokeColor: "#0000ff"
                                },
                                "Line": {
                                    strokeWidth: 3,
                                    strokeOpacity: 1,
                                    strokeColor: "#0000ff"
                                },
                                "Polygon": {
                                    strokeWidth: 2,
                                    strokeOpacity: 1,
                                    strokeColor: "#0000ff",
                                    fillColor: "#0000ff"
                                }
                            }
                        })
                    ]
                })
            });
            
			  // create three vector layers
            
            poly = new OpenLayers.Layer.Vector("polygons", {
                styleMap: styles
            });
            
            line = new OpenLayers.Layer.Vector("lines", {
                styleMap: styles
            });
            point = new OpenLayers.Layer.Vector("points", {
                styleMap: styles
            });
            
             map.addLayers([Layer,baseLayer]);
			
			
			// configure the snapping agent
            snap = new OpenLayers.Control.Snapping({
                layer: poly,
                targets: [point, line, poly],
                greedy: false
            });
            snap.activate();
 
            var panel = new OpenLayers.Control.Panel({
                displayClass: "olControlEditingToolbar"
            });
            draw = new OpenLayers.Control.DrawFeature(
                poly, OpenLayers.Handler.Polygon,
                {displayClass: "olControlDrawFeaturePoint", title: "Draw Features", handlerOptions: {holeModifier: "altKey"}}
            );
            modify = new OpenLayers.Control.ModifyFeature(
                poly, {displayClass: "olControlModifyFeature", title: "Modify Features"}
            );            
            panel.addControls([
                new OpenLayers.Control.Navigation({title: "Navigate"}),
                draw, modify
            ]);
			
			 map.addControl(panel);
             map.addLayers([Layer,baseLayer,poly,line,point]);
			
			var center=new OpenLayers.LonLat(103.222595,35.70737).transform(map.displayProjection,map.getProjectionObject());
			map.setCenter(center, 4);  //添加平移缩放工具条
			
        }

 		$(document).ready(function(){
			init();
			initUI();
		});

		function initUI() {
            var check = document.getElementById("snapping");
            check.checked = true;
            check.onclick = function() {
                if(check.checked) {
                    snap.activate();
                } else {
                    snap.deactivate();
                }
            };
            
            var sel = document.getElementById("editable");
            sel.value = "poly";
            sel.onchange = function() {
                updateEditable(sel.value);
            };
            
            var target, type, tog, tol;
            var types = ["node", "vertex", "edge"];
            for(var i=0; i<snap.targets.length; ++i) {
                target = snap.targets[i];
                for(var j=0; j<types.length; ++j) {
                    type = types[j];
                    tog = document.getElementById(i + "_" + type);
                    tog.checked = target[type];
                    tog.onclick = (function(tog, type, target) {
                        return function() {target[type] = tog.checked;}
                    })(tog, type, target);
                    tol = document.getElementById(i + "_" + type + "Tolerance");
                    tol.value = target[type + "Tolerance"];
                    tol.onchange = (function(tol, type, target) {
                        return function() {
                            target[type + "Tolerance"] = Number(tol.value) || 0;
                        }
                    })(tol, type, target);
                }
            }
            
        }
		
		
		// this function allows the editable layer to be changed
        // for the snapping control, this amounts to calling setLayer
        function updateEditable(name) {
 
            layer = window[name];
            
            // update the editable layer for the snapping control (nice)
            snap.setLayer(layer);
 
            // update the editable layer for the modify control (ugly)
            var modActive = modify.active;
            if(modActive) {
                modify.deactivate();
            }
            modify.layer = layer;
            modify.selectControl.layer = layer;
            modify.selectControl.handlers.feature.layer = layer;
            modify.dragControl.layer = layer;
            modify.dragControl.handlers.drag.layer = layer;
            modify.dragControl.handlers.feature.layer = layer;
            if(modActive) {
                modify.activate();
            }
            
            // update the editable layer for the draw control (very ugly)
            var drawActive = draw.active;
            if(drawActive) {
                draw.deactivate();
            }
            draw.layer = layer;
            var handler = ({
                point: OpenLayers.Handler.Point,
                line: OpenLayers.Handler.Path,
                poly: OpenLayers.Handler.Polygon
            })[name];
            draw.handler = new handler(draw, draw.callbacks, draw.handlerOptions);
            if(drawActive) {
                draw.activate();
            }
 
        }
    </script>
</head>
<body>
    <div id="map" style="width: 100%; height: 460px;border:1px solid gray; ">
    </div>
    
    <label for="editable">Editable Layer:</label>
    <select id="editable" name="editable">
        <option value="poly">polygons</option>
        <option value="line">lines</option>
        <option value="point">points</option>
    </select>
    <label for="snapping">Enable Snapping</label>
    <input type="checkbox" name="snapping" id="snapping" checked="checked" />
    <table>
        <tbody>
            <tr class="head">
                <td>targets</td><td>node</td><td>vertex</td><td>edge</td>
            </tr>
            <tr>
                <td>points</td>
                <td><input type="checkbox" id="0_node" /><input id="0_nodeTolerance" type="text" size="3" /></td>
                <td><input type="checkbox" id="0_vertex" /><input id="0_vertexTolerance" type="text" size="3" /></td>
                <td><input type="checkbox" id="0_edge" /><input id="0_edgeTolerance" type="text" size="3" /></td>
            </tr>
            <tr>
                <td>lines</td>
                <td><input type="checkbox" id="1_node" /><input id="1_nodeTolerance" type="text" size="3" /></td>
                <td><input type="checkbox" id="1_vertex" /><input id="1_vertexTolerance" type="text" size="3" /></td>
                <td><input type="checkbox" id="1_edge" /><input id="1_edgeTolerance" type="text" size="3" /></td>
            </tr>
            <tr>
                <td>polygons</td>
                <td><input type="checkbox" id="2_node" /><input id="2_nodeTolerance" type="text" size="3" /></td>
                <td><input type="checkbox" id="2_vertex" /><input id="2_vertexTolerance" type="text" size="3" /></td>
                <td><input type="checkbox" id="2_edge" /><input id="2_edgeTolerance" type="text" size="3" /></td>
            </tr>
        </tbody>
    </table>
    
</body>
</html>
